<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="myapp">
        <my-container>
            <template v-slot:header>
                <h1>插槽的头部</h1>
            </template>
            <!--简写: # ==> v-slot: -->
            <template #main>
                <p>插槽的内容</p1>
                <p>插槽的内容</p1>
                <p>插槽的内容</p1>
            </template>
            <template #footer>
                <h1>插槽的尾部</h1>
            </template>
        </my-container>
        <my-container></my-container>

    </div>
</body>
<script>
    const app = Vue.createApp({})
    const container_component = {
        template: `<div style="border-style: solid; border-color: red; border-width: 10px;">
            <slot name="header">插槽的默认内容</slot>
            <hr/>
            <slot name="main"></slot>
            <hr/>
            <slot name="footer"></slot>
            </div>`
    }
    app.component("my-container", container_component)
    app.mount("#myapp")
</script>